<template>
  <div class='maxSwiper'>
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">疫情防控</span>
      <span class="header-wrap-right">
        <!-- <i class="iconseach iconfont icon-sousuo"></i> -->
      </span>
    </div>
    <!-- swiper -->
    <div class="swiper">
      <div class="swiper" @click="newpneumonia">
        <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3197399242,200746679&fm=26&gp=0.jpg" alt="">
      </div>
    </div>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import api from '../../../api/api.js'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { Loading } from 'vant';
  export default{
    props:{
      message:{
        type:Array
      }
    },
    data(){
      return{
        loading: true,
        host: api.host,
        val: 5,
        swiperOption: {
          //slidesPerView: 1, //同时显示swiper数量
          effect: 'fade', //切换渐变
          //spaceBetween: 30, //slide之间的距离（单位px)
          autoplay: {
            delay: 2500,
            disableOnInteraction: false  //用户操作后是否不执行autoplay
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true //点击分页器切换swiper
          },
        }
      }
    },
    created(){
      
    },
    methods:{
      goback(){
        this.$router.go(-1)
      },
      newpneumonia(){
        window.location.href = 'https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_pc_3#tab4'
      }
    },
    components: {
      swiper,
      swiperSlide,
      [Loading.name]:Loading,
    }
  }
</script>
<style>
  #app .maxSwiper .swiper-pagination-bullet-active{
    background-color: #fff;
  }
  #app .maxSwiper .swiper-pagination-bullet{
    background-color: #f1f1f1;
  }
</style>

<style scoped>
.maxSwiper{
  margin-top: 1rem; 
  width: 100%;
  height: 4rem;
}
.swiper-container{
  height: 100%;
}
.maxSwiper-img{
  width: 100%;
  height: 100%;
}
.swiper{
  width: 100%;
  height: 4rem;
}
.swiper img{
  width: 100%;
  height: 100%;
}
</style>